<template>
	<w-container id="container">
		<u-sticky customNavHeight="0" bgColor="#fff">
			<u-status-bar></u-status-bar>
			<u-gap height="10"></u-gap>
			<view class="flex flex-ai-center flex-js-sb plr-14" style="width: 100%;">
				<w-image src="/static/bg/inde-top-logo1.png" :width="146/2" :height="38/2"></w-image>
				<search placeholder="搜素商品" />
				<w-icon @tap="toPage('/pages/message/message')" name="notice" size="24"></w-icon>
			</view>
		<!-- 	<view class="flex flex-dir-col flex-ai-center">
				<w-image src="/static/bg/index-top-title.png" mode="widthFix" width="252"></w-image>
				<w-image class="mt-16" src="/static/bg/index-join.png" mode="widthFix" width="237"></w-image>
			</view> -->
			<u-gap height="17"></u-gap>
		</u-sticky>
		<view class="plr-8">
			<w-swiper></w-swiper>
			<w-notice ></w-notice>
		</view>
		<view class="plr-8 box-b mtb-10">
			<view class="pt-12 plr-8 bg-color-index br-12 box-b"><w-grid ref='grid'></w-grid></view>
		</view>
		<!-- 宫格 -->
		<!-- <view class="plr-16 mt-12">
			<view class="notice">
				<w-notice></w-notice>
			</view>
		</view> -->

		<!-- 按钮卡片 -->
		<cardAction :banners="elseBanners" />

		<!-- 类型切换 -->
		<!-- 		<u-sticky :offset-top="0" style='top:0' id='tab'>
			<view class="tabs mt-12 flex flex-js-center" :class="{show:tabTop<=10}" :style="{paddingTop:padding+'px'}">
				<w-tabs :tabList="tabList" scrollable @change="changeTab" :itemStyle="{width:'200rpx'}"></w-tabs>
			</view>
		</u-sticky> -->

		<view class="bg-color-index mt-12 pa-12 box-b" style="border-radius: 35rpx 35rpx 0 0;">
			<view class="flex flex-ai-center flex-js-sb">
				<w-big-title :hengxian="false" title="发售记录"></w-big-title>
			</view>
			<Sort />
			<view class="mt-12 flex flex-w flex-js-sb" v-if="tabIndex<2 && goodsList.length">
				<w-index-collection class="mb-12" v-for="item in goodsList" :key="item.id+String(item.batch_id)"
					:product="item"></w-index-collection>
			</view>
			<view class="plr-12" style="box-sizing: border-box;" v-if="tabIndex==2">
				<w-activity-card v-for="item in activityList" :key="item.id" :item='item'></w-activity-card>
			</view>
			<w-loading :type="collectionLoadingType" emptyType="search" empty-top="10"></w-loading>
		</view>

				<!-- <view class="plr-16" style="box-sizing: border-box;" v-if="tabIndex==2">
			<w-activity-card v-for="item in activityList" :key="item.id" :item='item'></w-activity-card>
			<w-loading :type="loadingType" emptyType="search" empty-top="50"></w-loading>
		</view> -->
		<!-- <w-copyright></w-copyright> -->
		<u-gap height="15"></u-gap>
		<!-- <w-tabbar></w-tabbar> -->

		<!-- <w-modal v-model="showTips" title="温馨提示" :showButton="false" :closeOnClickOverlay='false'>
			<view class="pt-16 font-color-dark font-size-14 plr-12">
				请树立正确的数字藏品消费理念，不以投资为名参与虚假炒作，谨防欺诈风险。
			</view>
			<w-button class="mt-32" shape="circle" @click='confimShowTip'>我知道了</w-button>
		</w-modal> -->


	
		<!-- 悬浮 -->
	<!-- 	<w-suspend-bar :close='false' v-if="showSuspendBar && userInfo.real_name_authentication=='0'"
			content="实名认证后才能购买数字藏品哦～" btnText="去实名" @close="showSuspendBar=false"
			@click="$u.route('/pages/certification/certification')">
		</w-suspend-bar> -->
		<!-- #ifdef H5 -->
		<!-- <w-suspend-bar v-if="showSuspendDownload&&iosshuqian!='1'" content="下载APP应用获得更好体验！" direction="top"
			btnText="下载APP" @close="closeShowSuspendDownload" @click="downloadApp">
		</w-suspend-bar> -->
		<!-- #endif -->
		<!-- <w-coupon-popup :show="showCoupon" @openCouponIkonw="openCouponIkonw"
			@closeCouponIkonw="closeCouponIkonw"></w-coupon-popup> -->
	</w-container>
</template>

<script>
	import {
		getCalenderList
	} from '@/api/collection/index.js'
	import {
		getActivityList
	} from '@/api/news/index.js'
	import {
		getNewsList,
		indexCarousel
	} from "@/api/notice/index.js"
	import {
		ranking
	} from "@/api/market/index.js"
	import {
		mapActions
	} from 'vuex'
	import {
		localBgUrl,
		appUpload
	} from "@/config/index.js"
	import search from './components/search.vue'
	import cardAction from './components/cardAction.vue'
	import newCollection from './components/new-collection.vue'
	import Sort from './components/Sort.vue'
	export default {
		components: {
			search,
			cardAction,
			newCollection,
			Sort
		},
		data() {
			return {
				showCoupon: false,
				showIndex: true,
				localBgUrl,
				appUpload,
				showTips: true,
				rankingList: [],
				newList: [],
				padding: 5,
				showTips1: false,
				showSuspendBar: true,
				showSuspendDownload: false,
				tabList: [

					{
						name: '新款藏品',
					},
					{
						name: '神秘盲盒',
					},
					{
						name: '平台活动',
					}
				],
				activityList: [],
				collectionList: [],
				loadingType: 'none',
				boxList: [],
				collectionPageInfo: {
					goods_type: 2,
					list_rows: 10,
					page: 0
				},
				collectionLoadingType: 'none',
				boxPageInfo: {
					goods_type: 1,
					list_rows: 10,
					page: 0
				},
				boxLoadingType: 'none',
				activityPage: {
					page: 1,
					limit: 10
				},
				tabIndex: 0,
				tabTop: 123,
				elseBanners:[],
				iosshuqian: uni.getStorageSync('iosshuqian')
			}
		},
		onLoad(e) {
			if (e.ios) {
				uni.setStorageSync('iosshuqian', e.ios)
				this.iosshuqian = e.ios
			}
			this.getList()
			this.getRanking() //获取市值排行
			this.getNewList() //	获取收藏咨询
		},
		onShow() {
			// uni.hideTabBar()
			// // #ifdef APP-PLUS
			// 	let isStartPage = uni.getStorageSync('isStartPage');
			// 	this.showIndex = isStartPage=='1'?true:false
			// // #endif
			this.getElseBanners()
			// #ifdef H5
			this.showIndex = true
			// 下载APP 每天只弹一次
			let curDate = new Date();
			let times = Date.parse(curDate.toDateString());
			if (uni.getStorageSync('timePop')) {
				if (times > uni.getStorageSync('timePop') + 24 * 60 * 60 * 1000) {
					uni.setStorageSync('timePop', times)
					this.showSuspendDownload = true
				}
			} else {
				this.showSuspendDownload = true
			}
			// #endif  
			this.getPageConfig();

			let indexTips = uni.getStorageSync('showIndexTips')
			// if (indexTips) {
			// 	this.showTips = true;
			// 	this.showTips1 = true;
			// }
		},
		onPullDownRefresh() {
			this.onRefresh()
		},
		computed: {
			goodsList() {
				if (!this.tabIndex) return this.collectionList;
				if (this.tabIndex == 1) return this.boxList
			}
		},
		methods: {
			...mapActions('config', ['getPageConfig']),
			toPage(url) {
				if (!this.isLogin) {
					uni.$emit('showLogin')
					return;
				}
				uni.navigateTo({ url })
			},
			confimShowTip() {
				this.showTips = false;
				uni.setStorageSync('showIndexTips', '2')
			},
			openCouponIkonw() {
				this.showCoupon = true
			},
			closeCouponIkonw(e) {
				uni.setStorageSync('iKonwCloseCoupon', e)
				this.showCoupon = !!!e
			},
			async getElseBanners(){
				const { data,code } = await indexCarousel()
				if(code != 1) return
				this.elseBanners = data
				this.elseBanners.map((item,index) => {
					this.elseBanners[index].image = this.$ossUrl + item.image
				})
			},
			left() {},
			/**
			 * 获取市值排行
			 */
			getRanking() {
				if (!this.isLogin) return;
				ranking({
					page: 1,
					list_rows: 10
				}).then(res => {
					this.rankingList = res.data
				}).catch(err => {})
			},
			getNewList() {
				getNewsList({
					page: 1,
					list_rows: 10
				}).then(res => {
					this.newList = res.data.data
				}).catch(err => {})
			},
			moreRangJump() {
				uni.navigateTo({
					url: '/pages/marketCapRanking/marketCapRanking'
				})
			},
			getList() {
				if (this.tabIndex == 0) {
					this.getCollectionList() //获取藏品列表
				}
				if (this.tabIndex == 1) {
					this.getBoxList() //获取盲盒列表
				}
			},
			onRefresh() {
				if (this.tabIndex == 0 || this.tabIndex == 1) {
					this.collectionPageInfo.page = 0
					this.boxPageInfo.page = 0
					this.collectionList = []
					this.boxList = []
					this.collectionLoadingType = 'none'
					this.boxLoadingType = 'none'
					this.getList()
					this.getRanking()
					this.getNewList()
				} else {
					this.activityList = []
					this.getActivityList({
						page: 1,
						limit: 10
					});
				}
			},

			//获取藏品列表
			getCollectionList() {
				if (this.collectionLoadingType !== 'none') return;
				this.collectionLoadingType = 'loading'
				this.collectionPageInfo.page++
				getCalenderList(this.collectionPageInfo).then(res => {
					uni.stopPullDownRefresh()
					this.collectionList = this.collectionList.concat(res.data)
					this.collectionLoadingType = 'none'
					if (res.data.length == 0) this.collectionLoadingType = 'empty'
				}).catch(err => {})
			},
			getBoxList() {
				if (this.boxLoadingType !== 'none') return;
				this.boxLoadingType = 'loading'
				this.boxPageInfo.page++
				getCalenderList(this.boxPageInfo).then(res => {
					uni.stopPullDownRefresh()
					this.boxList = this.boxList.concat(res.data)
					this.boxLoadingType = 'none'
					if (res.data.length == 0) this.boxLoadingType = 'empty'
				}).catch(err => {})
			},
			closeShowSuspendDownload() {
				let curDate = new Date();
				let times = Date.parse(curDate.toDateString());
				uni.setStorageSync('timePop', times)
				this.showSuspendDownload = false
			},
			toNotice(index) {
				uni.setStorage({
					key: "notice",
					data: index,
					success() {
						uni.switchTab({
							url: '/pages/notice/notice'
						})
					}
				})
			},
			scroll(e) {
				let _this = this;
				uni.createSelectorQuery().in(this).select("#tab").boundingClientRect(({
					top
				}) => {
					_this.tabTop = top
					let statusHeight = uni.getSystemInfoSync().statusBarHeight
					if (top <= statusHeight) {
						_this.padding = statusHeight + 5;
					} else {
						_this.padding = 5
					}

				}).exec()
			},
			changeTab({
				index,
				refresh = false
			}) {
				this.tabIndex = index;
				this.onRefresh()
			},

			// 活动
			getActivityList(search) {
				if (this.loadingType == 'loading') return;
				this.loadingType = 'loading'
				getActivityList(search).then(res => {
					uni.stopPullDownRefresh()
					if (search.page == 1) {
						this.activityList = []
					}
					if (res.data.data) {
						this.activityPage = search;
					}
					this.loadingType = 'none'
					this.activityList = this.activityList.concat(res.data.data);
					if (res.data.total == 0) {
						this.loadingType = 'empty'
					}
				})
			},
			//加载更多
			loadMore() {
				if (this.tabIndex == 0) {
					let search = JSON.parse(JSON.stringify(this.tabIndex ? this.boxPageInfo : this.collectionPageInfo))
					search.page++
					this.getGoodsList(search);
				} else {
					let search = JSON.parse(JSON.stringify(this.activityPage))
					search.page++
					this.getActivityList(search);
				}
			},
			//切换到商品列列表（藏品|盲盒）
			switchGoodsList(goodsType, refresh) {
				let list = goodsType == 1 ? this.boxList : this.collectionList
				if (!list.length || refresh) {
					let search = goodsType == 1 ? this.boxPageInfo : this.collectionPageInfo;
					search.page = 1;
					this.getGoodsList(search)
				}
			},
			//获取商品列表
			getGoodsList(search) {
				if (this.loadingType == 'loading') return;
				this.loadingType = 'loading'
				getCalenderList(search).then(res => {
					this.loadingType = 'none'
					if (search.page == 1 && res.data.length == 0) {
						this.loadingType = 'empty'
					}
					uni.stopPullDownRefresh()
					this.insertGoodsData(search, res.data);
				})
			},
			//插入数据
			insertGoodsData(search, list) {
				let {
					goods_type,
					page
				} = search;
				if (goods_type == 1) {
					if (list.length) this.boxPageInfo = search;
					if (page == 1) this.boxList = []
				} else {
					if (list.length) this.collectionPageInfo = search;
					if (page == 1) this.collectionList = []
				}

				list.map(v => {
					if (goods_type == 1) {
						this.$set(this.boxList, this.boxList.length, v)
					} else {
						this.$set(this.collectionList, this.collectionList.length, v)
					}
				})
			},
			// 下载
			downloadApp() {
				window.location.href = this.appUpload
			}
		}
	}
</script>
<style>
	page {
		background-color: #F3F5F9;
	}
</style>
<style lang="scss">
	#container {
		padding-bottom: calc(var(--window-bottom) + 20rpx);
		// @extend .bg-color-page_mian;
		// background-image: url($IMG_URL + '/static/bg/index-bg.png');
		// background-size: 750rpx auto;
		// background-repeat: no-repeat;
		// padding-top: calc(var(--status-bar-height));
		// overflow-x: hidden;
		// background: linear-gradient( 180deg, #FFFFFF 43%, rgba(243,244,248,0) 100%);

		.header {
			padding-top: calc(var(--status-bar-height) + 24rpx);
		}

		.tabs.show {
			@extend .bg-color-page_mian;
		}

		.btn_card {
			width: 100%;
			height: auto;

			>image {
				width: 328rpx;
				height: 84rpx;
				display: block;
			}
		}
	}

	.swiper_wrap {
		// padding-top: 32rpx;
		// display: flex;
		// align-items: center;
		// padding-left: 70rpx;
		// padding-right: 100rpx;
	}

	.notice {
		box-shadow: 0rpx 10rpx 20rpx 2rpx rgba(0, 0, 0, 0.05);
	}

	.scroll-list {
		@include flex(column);

		&__goods-item {
			margin-right: 20px;

			&__image {
				width: 60px;
				height: 60px;
				border-radius: 4px;
			}

			&__text {
				color: #f56c6c;
				text-align: center;
				font-size: 12px;
				margin-top: 5px;
			}
		}

		&__show-more {
			background-color: #fff0f0;
			border-radius: 3px;
			padding: 3px 6px;
			@include flex(column);
			align-items: center;

			&__text {
				font-size: 12px;
				width: 12px;
				color: #f56c6c;
				line-height: 16px;
			}
		}
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.hbox {
		position: relative;

		>.notice {
			width: calc(100% - 48rpx);
			position: absolute;
			left: 26rpx;
			bottom: -20rpx;
		}
	}
</style>